{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
<div class="scene-reconstruction">
<div class="scene-reconstruction-text {% if section.settings.full_width %}image-with-text--full-width page-width{% else %}fill-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  {%- if section.settings.header != blank -%}
  <div class="title">
   <span>{{ section.settings.header }}</span>
  </div>
{% endif %}

<div class="swiper-father">
    {%- for block in section.blocks -%}
    <div class="ImagesText ImagesText-{{ forloop.index0 }}" {{ block.shopify_attributes }}>
      <div class="image-with-text__grid color-{{ block.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if block.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}" >
        <div class="grid__item">
          <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
          >
            {%- if block.settings.image != blank and block.settings.html == blank -%}
              <img
                srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                  {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                  {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                  {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                  {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                  {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                  {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                src="{{ block.settings.image | img_url: '1500x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                alt="{{ block.settings.image.alt | escape }}"
                loading="lazy"
                width="{{ block.settings.image.width }}"
                height="{{ block.settings.image.height }}"
              >
            {%- elsif block.settings.image == blank and block.settings.html != blank -%}
              

              {{ block.settings.html  }}
             {%- else -%}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
          </div>
        </div>
        <div class="grid__item">
          <div class="block-content">
            <div class="image-with-text__content image-with-text__content--{{ block.settings.height }}">
               <div class="c_content">
                 <div class="text-block">
                    {% if block.settings.heading != blank %}
                    <div class="image-with-text__heading" >
                      {{ block.settings.heading | escape }}
                    </div>
                    {% endif %}
                    {% if block.settings.des != blank %}
                    <div class="des">
                       {{ block.settings.des }}
                   </div>
                 {% endif %}
                  <div class="image-with-text__text rte">
                    {{ block.settings.text }}
                  </div>
                  <div class="image-with-text__text richtext rte">{{ block.settings.richtext }}</div>
                  {%- if block.settings.button_label != blank -%}
                   <div class="ten-button">
                    <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                      {{ block.settings.button_label | escape }}
                    </a>
                   </div>
                  {%- endif -%}
                 </div>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {%- endfor -%}
</div>
</div>
</div>


{% schema %}
{
  "name": "Scene reconstruction",
  "class": "spaced-section spaced-section--full-width image-block",
  "settings": [
    {
    "type": "checkbox",
    "id": "full_width",
    "default": false,
    "label": "t:sections.rich-text.settings.full_width.label"
  }, 
  {
    "type": "text",
    "id": "header",
    "label": "Title"
   }
  ],
  "blocks": [
  {
    "type": "block",
    "name": "block",
    "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    },
    {
      "type": "html",
      "id": "html",
      "label": "html"
    },
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Image with text"
      },
      {
        "type": "richtext",
        "id": "des",
        "label": "Details"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Richtext"
      },
      {
        "type": "richtext",
        "id": "richtext",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Des"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "adapt"
          },
          {
            "value": "small",
            "label": "small"
          },
          {
            "value": "large",
            "label": "large"
          }
        ],
        "default": "adapt",
        "label": "adapt"
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "background-1",
            "label": "background-1"
          },
          {
            "value": "background-2",
            "label": "background-2"
          },
          {
            "value": "inverse",
            "label": "inverse"
          },
          {
            "value": "accent-1",
            "label": "accent-1"
          },
          {
            "value": "accent-2",
            "label": "accent-2"
          }
        ],
        "default": "background-1",
        "label": "background-1"
      },
      {
        "type": "select",
        "id": "layout",
        "options": [
          {
            "value": "image_first",
            "label": "image_first"
          },
          {
            "value": "text_first",
            "label": "text_first"
          }
        ],
        "default": "image_first",
        "label": "image_first",
        "info": "image_first"
      },
      {
        "type": "text",
        "id": "button_label",
        "default": "Button label",
        "label": "Button label",
        "info": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ]
  }
  ],
  "presets": [
    {
      "name": "Scene reconstruction",
      "blocks": [
        {
          "type": "block"
        }
      ]
    }
  ]
}
{% endschema %}
